@import './common/var.scss';
.wrap-tree{
  color: $--wrap-tree-color;
  height: 100%;
  .expand-tree{
    border: none;
    margin-top: 10px;
  }
  .el-tree{
    background: $--wrap-tree-item-background-color;
  }
  .expand-tree .is-current>.el-tree-node__content {
    background: $--wrap-tree-item-current-background-color;
    .tree-label{
      font-weight: $--font-weight-primary + 200;
      flex: 1 1 50%;
      max-width: 50%;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
  }
  .el-tree-node__content>.el-tree-node__expand-icon {
    padding: 12px 10px 12px 12px;
  }
  .el-tree-node__content {
    height: 100%;
  }
  .panel-expand-btn {
    width: 38px;
    padding: 10px;
    word-break: break-word;
    border: $--border-width-base $--border-style-base $--wrap-tree-border-color;
    cursor: pointer;
  }
  .tree-expand {
    display: inline-flex;
    width: 90%;
    span {
      align-self: center;
    }
    .tree-label {
      font-size: 0.9em;
      color: $--wrap-tree-label-color;
    }
    .tree-btn {
      margin-left: 20px!important;
      .ButtonList{
        padding: 10px 0px!important;
        color: $--wrap-tree-button-color;
      }
      .c-button-list{
        .el-button{
          border: none;
          background: none;
        }
      }
    }
  }
  .topMenu {
    .header {
      position: relative;
      padding: 0 20px;
      height: $--wrap-tree-menu-height;
      line-height: $--wrap-tree-menu-height;
      border-bottom: $--border-width-base $--border-style-base $--wrap-tree-border-color;
      .el-icon-caret-left {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        color: $--wrap-tree-panel-icon-color;
      }
      .title {
        font-size: $--font-size-base + 2;
        font-weight: $--font-weight-primary - 100;
        color: $--wrap-tree-title-color;
      }
    }
    .treeMenuBtn {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      .ButtonList{
        flex: 1;
        margin-left: 0;
        padding: 10px 0px!important;
        color: $--wrap-tree-menu-button-color;
        font-size: $--font-size-base;
      }
    }
    .select-wrap {
      padding-top: 10px;
      padding-bottom: 10px;
      .select {
        width: 100%;
      }
    }

    .mid {
      width: 100%;
      display: flex;
      overflow: hidden;
      .button{
        flex: 1;
        // float: left;
        // width: 25%;
        margin-left: 0;
      }
      .el-button {
        padding: 10px 0px !important;
      }
    }
    .search{
      margin-top: 10px;
    }
    .search-input{
      input{
        background: $--wrap-tree-search-background-color;
        border-radius: $--wrap-tree-search-border-radius;
        color: $--wrap-tree-search-color;
      }
      .el-input__suffix{
        border-left: $--border-width-base $--border-style-base $--wrap-tree-search-border-color;
        color: $--wrap-tree-search-icon-color;
        cursor: pointer;
      }
    }
  }
  .el-select-dropdown__wrap{
    max-height:100%;
  }
  .panel{
    height:100%;
    display: flex;
    flex-direction: column;
    .scroll-tree{
      flex: 1;
    }
  }
}
